<template>
    <div class="photoinfo-container">
        <div class="title">
            <h4>{{data.title}}</h4>
            
            <div>
                <span>添加时间：{{data.add_time | dateFormat}}</span>
                <span>点击：{{data.click}}</span>
            </div>
        </div>
        <hr>
        <vue-preview :slides="list"></vue-preview>
        <div class="content" v-html="data.content"> 
        </div>
        <comments :id="id"></comments>
    </div>
</template>

<script>
import { toast } from 'mint-ui';
import comments from '../subcomponents/comment.vue';
export default {
    data() {
        return {
            id: this.$route.params.id,
            data: [],
            list: []
        }
    },
    methods: {
        getData() {
            this.$http.get(`api/getimageInfo/${this.id}`).then( res => {
                if( res.body.status == 0 ) {
                    this.data = res.body.message[0];
                    console.log(this.data);
                }
                else {
                    toast('获取详情失败');
                }
                
            });
        },
        getList() {
            this.$http.get(`api/getthumimages/${this.id}`).then( res => {
                if(res.body.status == 0) {
                    res.body.message.forEach(item => {
                        item.w = 600;
                        item.h = 400;
                        item.msrc = item.src;
                    })
                    this.list = res.body.message;
                }
            })
        }
    },
    created() {
        this.getData();
        this.getList()
    },
    components: {
        comments: comments,
    }
}
</script>

<style lang="less" slot-scope>
    .photoinfo-container {
        padding: 0 4px;
        .title{
            font-size: 12px;
            h4 {
                margin: 10px 0;
                font-size: 16px;
                text-align: center;
                color: skyblue;
            }
            >div {
                display: flex;
                justify-content: space-between;
                color: #999;
            }
        }
        figure {
            display: inline-block;
            margin: 10px;
            img[itemprop="thumbnail"] {
                width: 80px;
                height: 80px;
                display: block;
            }
        }
        
        .content {
            font-size: 12px;
            line-height: 30px;
        }
    }
</style>